<%--
  Created by IntelliJ IDEA.
  User: 86183
  Date: 2022/5/8
  Time: 2:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>申请创建店铺</title>
    <link rel="shortcut icon" href="#"/>
    <style>
        body{
            color: white;
            background-color: black;
        }
        span{
            width: 200px;
            height: 5px;
            color: red;
            font-size: 4px;
        }
    </style>
</head>
<body>
    <form method="post" action="/theHomePageServlet" enctype="multipart/form-data">
        <input type="hidden" name="action" value="updateDetailedUser">
        <input type="hidden" name="ownerId" id="ownerId" value="">
        店名：<input type="text" id="name" name="name" value="" maxlength="10"><br>
        <span id="checkShopName"></span>
        <br>
        介绍：<textarea id="introduction" name="introduction" maxlength="255"></textarea><br>
        <span id="checkIntroduction"></span>
        <br>
        <label for="pictureUrl">店铺图片:</label>
        <input type="file" id="pictureUrl" name="pictureUrl"><br>
        <br>
        请选择您的店铺地址: 地区:<select id="district" name="district"></select>
        街区:<select id="street" name="street" style="margin-left: 10px"></select>
        <input type="text" id="detailedAddress" name="detailedAddress" placeholder="请在此输入详细地址" maxlength="255">
        <br>
        <span id="checkAddress"></span>
        <br>
        <input type="submit">
    </form>
</body>
    <script>
        function getCookie(name) {
            if (document.cookie.length > 0) {
                let start = document.cookie.indexOf(name + "=");
                if (start != -1) {
                    start = start + name.length + 1;
                    let end = document.cookie.indexOf(";", start);
                    if (end == -1) end = document.cookie.length;
                    return decodeURI(document.cookie.substring(start, end));
                }
            }
            return null;
        }
        document.getElementById("ownerId").value=getCookie("id");
        document.getElementById("name").onblur=function (){
            let name = document.getElementById("name").value;
            if(name.trim() == ""){
                document.getElementById("checkShopName").innerHTML="<text>&nbsp;店铺名必须在1~10个字符以内!</text>";
            }else{
                let xhr=new XMLHttpRequest();
                xhr.open("post","http://localhost:80/checkShopName",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.responseType='json';
                xhr.send("shopName="+JSON.stringify(name));
                xhr.onreadystatechange=function(){
                    if(xhr.status==200 && xhr.readyState==4){
                        let data = xhr.response;
                        console.log(data);
                        if(data["code"]==200){
                            document.getElementById("checkShopName").innerHTML=
                                "<text>"+data.state+"</text>"
                        }
                    }
                }
            }
        }
        document.getElementById("name").onfocus=function (){
            document.getElementById("checkShopName").innerHTML='';
        }
        document.getElementById("introduction").onblur=function (){
            let name = document.getElementById("introduction").value;
            if(name.trim() == ""){
                document.getElementById("checkIntroduction").innerHTML="店铺介绍不能为空!";
            }else{
                let xhr=new XMLHttpRequest();
                xhr.open("post","http://localhost:80/sensitiveCheck",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.responseType='json';
                xhr.send("content="+JSON.stringify(name));
                xhr.onreadystatechange=function(){
                    if(xhr.status==200 && xhr.readyState==4){
                        let data = xhr.response;
                        console.log(data);
                        if(data["code"]==404){
                            document.getElementById("checkIntroduction").innerHTML=data.state;
                        }
                    }
                }
            }
        }
        document.getElementById("introduction").onfocus=function (){
            document.getElementById("checkIntroduction").innerHTML='';
        }
        document.getElementById("detailedAddress").onblur=function (){
            let name = document.getElementById("detailedAddress").value;
            if(name.trim() == ""){
                document.getElementById("checkAddress").innerHTML="详细地址不能为空!";
            }else{
                let xhr=new XMLHttpRequest();
                xhr.open("post","http://localhost:80/sensitiveCheck",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.responseType='json';
                xhr.send("content="+JSON.stringify(name));
                xhr.onreadystatechange=function(){
                    if(xhr.status==200 && xhr.readyState==4){
                        let data = xhr.response;
                        console.log(data);
                        if(data["code"]==404){
                            document.getElementById("checkAddress").innerHTML=data.state;
                        }
                    }
                }
            }
        }
        document.getElementById("detailedAddress").onfocus=function (){
            document.getElementById("checkAddress").innerHTML='';
        }
        window.onload=function (){
            function addDistrict(){
                let json={
                    "district" : null,
                    "mode": "district"
                }
                let xhr=new XMLHttpRequest();
                xhr.open("post","http://localhost:80/updateHomePage",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                xhr.responseType='json';
                xhr.send("json="+JSON.stringify(json));
                xhr.onreadystatechange=function(){
                    if(xhr.status==200 && xhr.readyState==4){
                        let data=xhr.response;
                        console.log(data);
                        if(data["code"]==404){
                            console.log(data.state)
                        }else{
                            let districts=JSON.parse(data.data);
                            console.log(districts)
                            for(let i=0;i<districts.length;i++){
                                document.getElementById("district").options.add(
                                    new Option(districts[i]["name"],districts[i]["name"]));
                                if(districts[i]["name"]==district){
                                    document.getElementById("district").options[districts[i]["name"]].selected = true;
                                }
                            }
                        }
                    }
                }

            }
            function addStreet(){
                document.getElementById("district").onchange=function (){
                    let obj=document.getElementById("district");
                    let district = obj.options[obj.selectedIndex].text;
                    console.log(district);
                    let json={
                        "district":district,
                        "mode":"street"
                    }
                    let xhr=new XMLHttpRequest();
                    xhr.open("post","http://localhost:80/updateHomePage",true);
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                    xhr.responseType='json';
                    xhr.send("json="+JSON.stringify(json));
                    xhr.onreadystatechange=function(){
                        if(xhr.status==200 && xhr.readyState==4){
                            let data=xhr.response;
                            console.log(data);
                            if(data["code"]==404){
                                console.log(data.state)
                            }else{
                                let streets=JSON.parse(data.data);
                                console.log(streets)
                                let obj=document.getElementById("street");
                                obj.options.length=0;
                                for(let i=0;i<streets.length;i++){
                                    obj.options.add(new Option(streets[i]["name"],streets[i]["name"]));
                                }
                            }
                        }
                    }
                }
            }
            addDistrict();
            addStreet();
        }
    </script>
</html>
